<template>
  <div class="flex flex-col w-10/12 p-2 bg-gray-200 rounded">
    <div class="flex justify-between">
      <span class="m-4 text-xl text-gray-400">已下单</span>
    </div>
    <div class="flex justify-end mb-4 mr-2">
      <a-month-picker placeholder="下单日期" v-model:value="lDate" @change="handleChange" />
    </div>
    <UserListingCard
      class="mb-4"
      v-for="item in userListing"
      :key="item.lId"
      :listingInfo="item"
    />
  </div>
</template>



<script lang="ts" setup>
import { computed, ref } from "vue"
import UserListingCard from './UserListingCard.vue'
import { useGoodsStore } from '@/store/modules/goods'
import { formatTimeStrToYearMonth } from '@/utils/fomatTime'
import type { Moment } from 'moment'
const goodsStore = useGoodsStore()
const userListing = computed(() => goodsStore.userListing)
const uid = sessionStorage.getItem('uid') as string
const lDate = ref<Moment>()
goodsStore.getUserListingByUid(uid)
const handleChange = () => {
  if (!lDate.value) {
    goodsStore.getUserListingByUid(uid)
  } else {
    const { year, month } = formatTimeStrToYearMonth(lDate.value as Moment)
    goodsStore.getUserListingByYearMonth({
      userId: uid,
      year,
      month
    })
  }
}





</script>
<style scoped>
</style>
